//获取元素
const $top = $('.top'), //顶部帖子内容区域
  $list = $('.list'), //评论列表区域
  $select = $('.from select'), //下拉菜单
  $textarea = $('.from textarea'), //文本书写框
  $btn = $('.from .btn'), //发表按钮
  post = 1 //信号量，代表现在查看的事帖子列表中的第一个帖子
//创建一个数组来接受所有用户名
let users = ['留白'],
  // 信号量，表示当前评论所使用的id值，id值不同代表不同人
  myId = 1
// 初始化页面，获取全部用户并将所有用户存入数组，并初始化下拉菜单
// 使用get方法获取数据
$.get('http://localhost:3000/uesrs', function (data) {
  // 遍历返回的数据，把所有名字按照顺序存进数组
  for (const i of data) {
    users.push(i.name)
  }
  // 下拉菜单获取数组名字，并带入模版生成下拉菜单内容
  $select.html(template('tem-select', {
    users: users
  }))
})
// 使用get方法获取帖子数据，这里使用信号量
$.get('http://localhost:3000/posts/' + post, function (data) {
  // 返回的数据添加一条属性并赋值名字，带入模版生成顶部帖子内容区域
  data.userName = users[data.userId]
  $top.html(template('tem-top', data))
})
// 利用get方法获取帖子全部评论，使用信号量
$.get('http://localhost:3000/comments?postId=' + post, function (data) {
  //遍历返回的数据，并且在每条数据内部添加一条名字属性，把回复帖子的人的名字添加进去
  for (const i of data) {
    i.userName = userName = users[i.userId]
    //带入模版生成结构并添加到列表底部
    $list.append(template('tem-list', i))
  }
  // 调用函数给所哟删除按钮添加删除功能
  del()
})
//监听下拉菜单的chgent事件，一旦发生改变立刻更新信号量
$select.change(function () {
  myId = $(this).val()
})
// 给发表按钮添加点击事件
$btn.click(function () {
  //获取发表评论的人的名字
  const name = $select.children().eq(myId).text(),
    // 获取要发表的内容
    text = $textarea.val()
  //判断发表内容是否为空，如果为空提示用户
  if (text === '') {
    alert('您没有输入内容哦')
    return
  }
  // 如果内容不为空，使用post方法向数据库添加数据
  $.post('http://localhost:3000/comments', {
    "postId": post,
    "userId": myId,
    "content": text
  }, function (data) {
    // 利用返回的数据，添加名字然后带入模版在列表最后添加一条评论
    data.userName = users[data.userId]
    $list.append(template('tem-list', data))
    // 调用函数再次给每个删除按钮添加删除功能
    del()
  })
  // 清空内容区域内容
  $textarea.val('')
})
// 删除按钮添加功能函数
function del() {
  // 找到每个删除按钮添加事件
  $list.find('.delete').click(function () {
    // 使用delete方法删除数据库数据
    $.ajax({
      url: `http://localhost:3000/comments/${$(this).parents('li').attr('uid')}`,
      type: 'delete'
    })
    // 删点击的删除按钮的祖先li标签
    $(this).parents('li').remove()
  })
}